<template>

    <div class="period_container">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>产品</el-breadcrumb-item>
            <el-breadcrumb-item>期数管理</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card class="period_card">

            <!-- title -->
            <el-row class="title font18">
                <el-col>期数列表</el-col>
                <el-col class="inner">
                    <el-button class="add_btn" @click="dialogVisible = true" type="primary">添加期数</el-button>
                </el-col>
            </el-row>

            <!-- 添加期数 -->
            <el-dialog close="period_dialog" :title="(stage_id === 0) ?'添加期数':'修改期数' " style="ine-height:60px;" :visible.sync="dialogVisible" width="30%"
                       :before-close="handleClose">
                <!-- 表单 -->
                <el-form class="my_form" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="90px">
                    <el-form-item label="所属专题:" prop="id">
                        <el-select style="width: 90%" v-model="ruleForm.id" placeholder="请选择所属专题">
                            <el-option v-for="item in type_list" :key="item.id" :label="item.label" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="期数:" prop="name">
                        <el-input style="width: 90%" v-model="ruleForm.name"></el-input>
                    </el-form-item>

                    <el-form-item label="起始时间:" prop="date" v-if="(ruleForm.id === 1) || (ruleForm.id === 2)">
                        <el-date-picker size="medium" style="width: 90%" v-model="ruleForm.date" type="datetimerange" start-placeholder="开始日期" range-separator="至" end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item label="排序:">
                        <el-input style="width: 90%" v-model="ruleForm.sort"></el-input>
                    </el-form-item>

                    <el-form-item label="状态:">
                        <el-radio v-model="ruleForm.radio" label="1">开启</el-radio>
                        <el-radio v-model="ruleForm.radio" label="2">关闭</el-radio>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="onSubmit('ruleForm')">确 定</el-button>
        </span>
            </el-dialog>

            <!-- 主体内容 -->
            <div class="period_content">
                <!-- tab选项 -->
                <el-row class="xcx-tabs">
                    <el-col :span="24" style="width: 80%">
                        <el-button type="text" :class="(type === 1) ? '': 'disable'" @click="handleClick(1)">乐趣电台
                        </el-button>
                        |
                        <el-button type="text" :class="(type === 2) ? '': 'disable'" @click="handleClick(2)">闪购
                        </el-button>
                        |
                        <el-button type="text" :class="(type === 3) ? '': 'disable'" @click="handleClick(3)">非趣不可
                        </el-button>
                        |
                        <el-button type="text" :class="(type === 4) ? '': 'disable'" @click="handleClick(4)">游轮趣玩
                        </el-button>
                        |
                        <el-button type="text" :class="(type === 5) ? '': 'disable'" @click="handleClick(5)">周末去哪
                        </el-button>
                    </el-col>
                </el-row>
                <!-- 表格 -->
                <el-table class="period_table" :data="tableData.slice((page-1)*limit,page*limit)" style="width: 100%" border>
                    <el-table-column prop="number" label="期数">
                    </el-table-column>
                    <el-table-column prop="create_time" label="添加时间">
                    </el-table-column>
                    <el-table-column prop="start_time" label="开始时间" v-if="(type === 1) || (type===2)">
                    </el-table-column>
                    <el-table-column prop="end_time" label="结束时间" v-if="(type === 1) || (type===2)">
                    </el-table-column>
                    <el-table-column prop="sort" label="排序">
                    </el-table-column>
                    <el-table-column prop="status" label="状态">
                    </el-table-column>

                    <el-table-column label="操作" width="200">
                        <div class="edit_box" slot-scope="scope">
                            <span class="edit" @click="edit(scope.row.id)">编辑</span>
                            <span @click="toRelation(scope.row.id)" class="edit mar" v-if="((type !== 1))">新增</span>
                            <span class="del" @click="to_list(scope.row.id)" v-if="(type !== 1)">查看</span>
                        </div>
                    </el-table-column>
                </el-table>
            </div>

            <!-- 分页器 -->
            <el-pagination background @current-change="handleCurrentChange" :current-page="page" :page-size="limit"
                           layout="total, prev, pager, next" :total="count">
            </el-pagination>
        </el-card>
    </div>

</template>

<script src='../../../static/js/period/period_list.js'></script>

<style scoped>
    @import "../../../static/css/period/period.css";
</style>


